<template>
	<!--
    	作者：1550495493@qq.com
    	时间：2019-07-24
    	描述：班级管理
    -->
	<div class="ClassManagement">
		<!--<div class="tab-tit">
			<a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">未排班学员</a>
			<a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">班级管理</a>
		</div>-->
		<!--<div class="tab-con">
			<div v-show="curId===0">
				<div class="search-box">
					<div class="fl">
						<input @click="openModal" class="user-box user-name" type="button" value="创建班级" />
					</div>
					<div class="fr">
						<input class="search-boxs" id="searchSudentVal" type="text" />
						<input class="user-box user-name" @click="searchSudent" type="button" value="检索" />
					</div>
				</div>
				<div class="PressRelease-list">
					<table>
						<thead>
							<tr>
								<th class="table-text-th1">选择</th>
								<th class="table-text-th2">姓名</th>
								<th class="table-text-th2">身份证号</th>
								<th class="table-text-th1">从事行业</th>
								<th class="table-text-th1">联系方式</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="model in allStudent">
								<td><label><input type="checkbox" :id="model.id" @click="checkStu(model.id, model.name, model.identityCard)"><i>✓</i></label></td>
								<td>{{model.name}}</td>
								<td>{{model.identityCard}}</td>
								<td>{{model.industry}}</td>
								<td>{{model.phone}}</td>
							</tr>
						</tbody>
					</table>
					<!--total  数据总数   size  一页多少条数据   page  当前页码    changge 返回当前选择的页码  改变一页显示条 child  返回值就是一页显示条数  -->
		<!--<pageination :total="total" :size="size" :page="page" :changge="pageFn" @child="obtainChild"></pageination>
				</div>-->
		<!--模态框-->
		<!--<div v-if="modelShow" class="tenant-model">
					<div class="tenant-model-content">
						<header class="tenant-model-header">
							<h3>创建班级</h3>
							<span @click="closeModel" id="closeModel">×</span>
						</header>
						<div class="tenant-model-body">
							<div class="search-contain form-box">
								<div class="search-input input-required">
									<label>班级名称：</label>
									<input class="search-boxs" id="className" type="text" />
								</div>

								<div class="table-box">
									<div class="table-left">
										<div class="search-input">
											<label>未排班学员：</label>
										</div>
										<table>
											<thead>
												<tr>
													<th>姓名</th>
													<th>身份证号</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody>
												<tr v-for="model in NotSchedulingStudent">
													<td>{{model.name}}</td>
													<td>{{model.identityCard}}</td>
													<td><input type="button" value="选择" @click="checkStuThe(model.id, model.name, model.identityCard)" class="delete" /></td>
												</tr>
											</tbody>
										</table>
									</div>
									<div class="table-right">
										<div class="search-input">
											<label>已选择学员：</label>
										</div>
										<table>
											<thead>
												<tr>
													<th>姓名</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody>
												<tr v-for="model in checkStudent">
													<td>{{model.name}}</td>
													<td><input type="button" @click="delStudent(model.id, model.name, model.identityCard)" value="删除" class="delete" /></td>
												</tr>

											</tbody>
										</table>
									</div>
								</div>

							</div>
						</div>
						<footer class="tenant-model-footer">
							<button class="determine" @click="addClass">确定</button>
						</footer>
					</div>
				</div>-->

		<!--</div>-->
		<!--<div v-show="curId===1">-->
		<div class="search-box">
			<div class="fl">
				<label>年度：</label>
				<select class="search-boxs" id="year">
              <option value="">请选择</option>
              <option v-for="t in time">{{t}}</option>
						</select>
			</div>
			<div class="fr">
				<input class="search-boxs" id="searchSudentVal" type="text" />
				<input class="user-box user-name" @click="getData" type="button" value="检索" />
			</div>
		</div>
		<div class="PressRelease-list">
			<table>
				<thead>
					<tr>
						<th class="table-text-th1">班级名称</th>
						<th class="table-text-th2">班级创建时间</th>
						<th class="table-text-th2">班级学员</th>
						<!--		<th class="table-text-th1">班级教师</th>-->
						<th class="table-text-th1">班级课程</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="model in classData">
						<td>{{model.name}}</td>
						<td>{{ toDateStr(model.createAt) }}</td>
						<td><input @click="modelStudents(model.id, model.name)" type="button" value="查看" class="delete write" /></td>
						<!--						<td><input @click="modelTeachers(model.id, model.name)" type="button" value="查看" class="delete write" /></td>-->
						<td><input @click="modelCurriculum(model.id, model.name)" type="button" value="查看" class="delete write" /></td>
					</tr>
				</tbody>
			</table>
			<!--total  数据总数   size  一页多少条数据   page  当前页码    changge 返回当前选择的页码  改变一页显示条 child  返回值就是一页显示条数  -->
			<pageination :total="classTotal" :size="classSize" :page="classPage" :changge="pageFn" @child="obtainChild"></pageination>
		</div>
		<!--模态框 --班级学员-->
		<div v-if="modelShowStudents" class="tenant-model">
			<div class="tenant-model-content">
				<header class="tenant-model-header">
					<h3>班级学员</h3>
					<span @click="closeModel" class="closeModel">×</span>
				</header>
				<div class="tenant-model-body">
					<div class="search-contain">
						<!--模态框内容板块-->
						<div class="search-input">
							<label>班级名称: {{className}}</label>
						</div>

						<div class="table-box">
							<div class="search-input">
								<label>班级学员：</label>
							</div>
							<table>
								<thead>
									<tr>
										<th>姓名</th>
										<th>身份证号</th>
										<th>结业报告</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="model in studentData">
										<td>{{model.name}}</td>
										<td>{{model.identitycard}}</td>
										<td><input type="button" @click="viewCurr(model.id, model.classId,model.name)" value="查看" class="delete write" /></td>
										<td>
											<!--未结业可以操作，结业后不可操作-->
											<template v-if="model.graduationStatus == 0">
												<input type="button" @click="classStudentGraduation(model.id, model.classId)" value="结业" class="delete write" />
												<!--   <input type="button" @click="deleteClassStudent(model.id, model.classId)" value="删除" class="delete write" />-->
												<input type="button" @click="delExisStudent(model.id)" value="删除" class="delete write" />
											</template>
										</td>

									</tr>

								</tbody>
							</table>
							<pageination :total="stotal" :size="size" :page="spage" :changge="spageFn1" @child="sobtainChild1"></pageination>
						</div>

					</div>
				</div>
				<footer class="tenant-model-footer">
					<button class="determine" @click="subEditStudent">确定</button>
				</footer>
			</div>
		</div>

		<!-- 学员的结题报告-->
		<div v-if="modelStudentCurr" class="tenant-model">
			<div class="tenant-model-content concluding-report">
				<header class="tenant-model-header">
					<h3>{{studentName}}结业报告</h3>
					<span @click="closethe" class="closeModel">×</span>
				</header>
				<div class="tenant-model-body">
					<div class="search-contain">
						<!--模态框内容板块-->

						<div class="table-box">
							<div class="search-input">
								<label>资源库课程：</label>
								<input class="search-boxs" v-model="curriculumName" type="text" />
								<input class="user-box user-name" @click="viewCurr" type="button" value="检索" />
							</div>
							<table>
								<thead>
									<tr>
										<th>课程</th>
										<th>编写时间</th>
										<th>结业报告</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="c in curr">
										<td>{{c.curriculumName}}</td>
										<td>{{formatData(c.reportTime)}}</td>
										<td><input type="button" @click="viewReport( c.report)" value="查看" class="delete write" /></td>
									</tr>
								</tbody>
							</table>
							<pageination :total="ctotal" :size="10" :page="cpage" :changge="cpageFn1" @child="cobtainChild1"></pageination>

						</div>

					</div>
				</div>
				<footer class="tenant-model-footer">
					<button @click="closethe" class="determine">确定</button>
				</footer>
			</div>
		</div>
<!--结题内容弹框  modelStudentCurrContent 少个弹框  用 <textarea>标签 里面放 {{report}} -->

    <div v-if="modelStudentCurrContent" class="tenant-model">
      <div class="tenant-model-content BaseTerminate">
        <header class="tenant-model-header">
          <h3>结业报告内容</h3>
          <span @click="closeReport" class="closeModel">×</span>
        </header>
        <div class="tenant-model-body">
          <div class="search-contain ">
          	<div v-if="report==null" class="nothing-content">暂无结业报告内容</div>
            <div v-html="report" class="terminate-content"></div>
          </div>
        </div>

      </div>
    </div>

		<!--模态框 --班级教师-->
		<div v-if="modelShowTeachers" class="tenant-model">
			<div class="tenant-model-content">
				<header class="tenant-model-header">
					<h3>班级教师</h3>
					<span @click="closeModel" class="closeModel">×</span>
				</header>
				<div class="tenant-model-body">
					<div class="search-contain">
						<!--模态框内容板块-->
						<div class="search-input">
							<label>班级名称: {{className}}</label>
						</div>

						<div class="table-box">
							<div class="table-left">
								<div class="search-input">
									<label>教师列表：</label>
									<input class="search-boxs" type="text" />
									<input class="user-box user-name" type="button" value="检索" />
								</div>
								<table>
									<thead>
										<tr>
											<th>姓名</th>
											<th>教师职工号</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="teacher in teacherTableData">
											<td>{{teacher.name}}</td>
											<td>{{teacher.staffNumber}}</td>
											<td><input type="button" @click="chooseTeacher(teacher.id,teacher.name,teacher.staffNumber)" value="选择" class="delete write" /></td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="table-right">
								<div class="search-input">
									<label>班级教师：</label>
								</div>
								<table>
									<thead>
										<tr>
											<th>姓名</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="teacher in teacherData">
											<td>{{teacher.name}}</td>
											<td><input type="button" @click="delTeacher(teacher.id,teacher.name,teacher.staffNumber)" value="删除" class="delete write" /></td>
										</tr>

									</tbody>
								</table>
							</div>
						</div>

					</div>
				</div>
				<footer class="tenant-model-footer">
					<button @click="subClassTeacher" class="determine">确定</button>
				</footer>
			</div>
		</div>
		<!--模态框 --班级课程-->
		<div v-if="modelShowCurriculum" class="tenant-model">
			<div class="tenant-model-content">
				<header class="tenant-model-header">
					<h3>班级课程</h3>
					<span @click="closeModel" class="closeModel">×</span>
				</header>
				<div class="tenant-model-body class-name">
					<div class="search-contain">
						<!--模态框内容板块-->
						<div class="search-input">
							<label>班级名称: {{className}}</label>
						</div>

						<div class="table-box after">
							<div class="table-left  class-name-left">
								<div class="search-input">
									<label>资源库课程：</label>
									<input class="search-boxs" v-model="curriculumSearch" type="text" />
									<input class="user-box user-name" @click="modelCurriculum" type="button" value="检索" />
								</div>
								<table>
									<thead>
										<tr>
											<th class="w200">课程名称</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>

										<tr v-for="curr in currTableData">
											<td :title="curr.name"><span class="show-oneline-table">{{curr.name}}</span> </td>
											<td><input type="button" @click="chooseCurr(curr.id, curr.name)" value="选择" class="delete write" /></td>
										</tr>
									</tbody>
								</table>
								<pageination :total="currTotal" :size="10" :page="currPage" :changge="pageFncurr" @child="obtainChildcurr"></pageination>
							</div>
							<div class="table-right  class-name-right">
								<div class="search-input">
									<label>已选课程：</label>
								</div>
								<div class="class-table">
									<table>
										<thead>
											<tr>
												<th class="w200">课程名称</th>
												<th class="w150">开课时间</th>
												<th class="w150">结课时间</th>
												<th class="w200">上课地点</th>
												<th class="w70">操作</th>
											</tr>
										</thead>
										<tbody>
											<tr v-if="!currData.length">
												<td colspan="5">暂无数据</td>
											</tr>
											<tr v-else v-for="curr in currData">
												<td :title="curr.name"><span class="show-oneline-table">{{curr.name}}</span></td>

												<td>
                          {{formatData(curr.biginTime,"yyyy-MM-dd hh:mm")}}
												</td>

												<td>
                          {{formatData(curr.endTime,"yyyy-MM-dd hh:mm")}}
												</td>
												<td :title="curr.addr">
													<span class="show-oneline-table">{{curr.addr}}</span>
												</td>
												<td><input type="button" @click="delChooseCurr(curr.curriculumId, curr.name)" value="删除" class="delete write" /></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>

					</div>
				</div>
				<footer class="tenant-model-footer">
					<button @click="subClassCurr" class="determine">确定</button>
				</footer>
			</div>
		</div>

		<div v-if="chooseCourse" class="tenant-model">
			<div class="tenant-model-content">
				<header class="tenant-model-header">
					<h3>选择课程</h3>
					<span @click="closeCourseModel" class="closeModel">×</span>
				</header>
				<div class="tenant-model-body choose-course-content">
					<div>
						<span><span class="star">*</span>课程名称：{{chooseCourseObj.name}}</span>
					</div>
					<div>
						<span><span class="star">*</span>开课时间：</span>
						<el-date-picker v-model="chooseCourseObj.biginTime" type="datetime"
            format="yyyy-MM-dd hh:mm" value-format="yyyy-MM-dd hh:mm" placeholder="选择开课时间">
                        </el-date-picker>
					</div>

					<div>
						<span><span class="star">*</span>结课时间：</span>
						<el-date-picker v-model="chooseCourseObj.endTime"  type="datetime"
            format="yyyy-MM-dd hh:mm" value-format="yyyy-MM-dd hh:mm"  placeholder="选择结课时间">
                        </el-date-picker>
					</div>
					<div>
						<span><span class="star">*</span>上课地点：</span>
						<textarea v-model="chooseCourseObj.addr"></textarea>
					</div>
				</div>
				<footer class="tenant-model-footer">
					<button @click="sureChoose" class="determine">确定</button>
				</footer>
			</div>
		</div>
	</div>

</template>
<script src="./ClassManagement.js"></script>

<style scoped>
	@import "ClassManagement.css";
</style>
